<template>
	<view class="tui-userinfo-box">
		<u-toast ref="uToast" />
		<u-modal v-model="show" @confirm="update" title="请输入" show-cancel-button=true>
			<view style="padding: 30rpx;margin-top: 10rpx;">
				<input placeholder="请输入" v-model="text"/>
			</view>
		</u-modal>
		<u-navbar :border-bottom='false' title-bold="true" style="font-weight: 1200;" title="个人信息"></u-navbar>
		<tui-list-cell padding="0" :arrow="true" @click="changeAvatar">
			<view class="tui-list-cell">
				<view>头像</view>
				<image style="border-radius: 50%;" :src="user.avatar==''?
				'https://img0.baidu.com/it/u=1240274933,2284862568&fm=253&fmt=auto&app=138&f=PNG?w=180&h=180':user.avatar"
				 class="tui-avatar"></image>
			</view>
		</tui-list-cell>
		<tui-list-cell padding="0" :arrow="true" @click="change(0)">
			<view class="tui-list-cell "  >
				<view>用户名</view>
				<view class="tui-content">{{user.name}}</view>
			</view>
		</tui-list-cell>
		<tui-list-cell padding="0" :arrow="true" @click="change(1)">
			<view class="tui-list-cell" >
				<view>真实姓名</view>
				<view class="tui-content">{{user.realName}}</view>
			</view>
		</tui-list-cell>
		<tui-list-cell padding="0" :arrow="true" @click="changeSex">
			<view class="tui-list-cell">
				<view>性别</view>
				<view class="tui-content">{{user.sex==1?'男':user.sex==2?'女':''}}</view>
			</view>
		</tui-list-cell>
		<tui-list-cell padding="0" :arrow="true" >
			<view class="tui-list-cell" style="color: #acacac;">
				<view>注册日期</view>
				<view class="tui-content" style="color: #acacac;">{{user.birthday}}</view>
			</view>
		</tui-list-cell>
		
		<view style="padding: 40rpx;">
			<tui-button @click="submit" shape="circle" shadow type="danger" height="88rpx">确认修改</tui-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				user:{},
				text:'',
				show:false,
				flag:0,
			}
		},
		
		onLoad() {
			this.$u.api.userDetail().then(res=>{
				this.user=res
			})
		},
		methods: {
			update(){
				if(this.flag==0){
					this.user.name=this.text
				}else if(this.flag==1){
					this.user.realName=this.text
				}
				this.text=''
				this.show=false
			},
			submit(){
				this.$u.api.updateUser(this.user).then(res=>{
					this.$refs.uToast.show({
						title: '修改成功,重新登录后信息将显示',
							// 如果不传此type参数，默认为default，也可以手动写上 type: 'default'
						type: 'success', 
							// 如果不需要图标，请设置为false
						icon: false,
						duration:500,
						back:false,
					});
				})
			},
			change(v){
				this.flag=v
				this.show=true
			},
			changeAvatar() {
				let that=this
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['album', 'camera'],
					success: res => {
						
						uni.uploadFile({
						    url: 'http://127.0.0.1:8010/oss/endpoint/put-file', //仅为示例，非真实的接口地址
						    filePath: res.tempFilePaths[0],
						    name: 'file',
						   
						    success: (r) => {
								console.log(r)
						        that.user.avatar=JSON.parse(r.data).data.link
						    },
							fail:()=>{
								that.$refs.uToast.show({
									title: '文件上传失败,请检查操作',
										// 如果不传此type参数，默认为default，也可以手动写上 type: 'default'
									type: 'error', 
										// 如果不需要图标，请设置为false
									icon: false,
									duration:500,
									back:false,
								});
							}
						});
					}
				});
			},
			nickname() {
				this.tui.href("/pages/my/nickname/nickname")
			},
			changeSex() {
				let that = this
				uni.showActionSheet({
					itemList: ['男', '女'],
					success(e) {
						that.user.sex = Number(e.tapIndex+1)
					}
				})
			},
			changeDate(e){
				this.user.birthday=e.detail.value
			}
		}
	}
</script>

<style>
	.tui-userinfo-box {
		margin: 20rpx 0;
		color: #333;
	}

	.tui-list-cell {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 24rpx 60rpx 24rpx 30rpx;
		box-sizing: border-box;
		font-size: 30rpx;
	}

	.tui-pr30 {
		padding-right: 30rpx;
	}

	.tui-avatar {
		width: 100rpx;
		height: 100rpx;
		display: block;
	}

	.tui-content {
		font-size: 26rpx;
		color: #666;
	}
</style>
